<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="root" value="${pageContext.request.contextPath}"></c:set>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>车辆管理</title>
<link href="${root}/static/css/bootstrap.min.css" rel="stylesheet"
	type="text/css" />
<script type="text/javascript" src="${root}/static/js/jquery-1.12.4.js"></script>
<script type="text/javascript" src="${root}/static/js/bootstrap.min.js"></script>
<script type="text/javascript" src="${root}/static/js/vue.min.js"></script>
<script type="text/javascript" src="${root}/static/js/axios.min.js"></script>
</head>
<body>
	<div id="app" class="container-fluid">
		<div class="col-md-2" style="margin-top: 20px">
			<button class="btn btn-info" @click="add()">添加</button>
		</div>
		<div class="col-md-2" style="margin-top: 20px">
			<input type="text" v-model="bsno" @keyup="search()"
				placeholder="请输入车牌关键字" class="form-control" />
		</div>
		<div class="col-md-2" style="margin-top: 20px">
			<button @click="all()"
				class="btn btn-default glyphicon glyphicon-search">所有车辆</button>
		</div>
		<table class="table">
			<caption>车辆列表</caption>
			<thead>
				<tr>
					<th>车牌号</th>
					<th>车辆类型</th>
					<th>车辆颜色</th>
					<th>车辆报价</th>
					<th>出租价格</th>
					<th>出租押金</th>
					<th>车辆描述</th>
					<th>车辆图片</th>
					<th>车辆状态</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
				<tr v-for="item in pager.items">
					<td>{{item.bsno}}</td>
					<td>{{item.bstype}}</td>
					<td>{{item.bscolor}}</td>
					<td>{{item.bsprice}}元</td>
					<td>{{item.bsrent}}元/天</td>
					<td>{{item.bsdeposit}}元</td>
					<td>{{item.bsdesc}}</td>
					<td><img class="img-circle img-thumbnail"
						style="width: 50px; height: 50px;"
						:src="'/upload${root}/bus-'+item.bsno+item.bsimg+'?Math.random()'" />
					</td>
					<td>{{item.bsstatuszh}}</td>
					<td v-if="item.bsstatus == 201"><a @click="update(item)"
						href="javascript:void(0);">
							<button class="btn btn-info">修改</button>
					</a> <a @click="stop(item.bsno)" href="javascript:void(0);">
							<button class="btn btn-info">停用</button>
					</a></td>
					<td v-if="item.bsstatus == 202"><a href="javascript:void(0);">
							<button class="btn btn-info" disabled="disabled">租赁中</button>
					</a></td>
					<td v-if="item.bsstatus == 203"><a href="javascript:void(0);">
							<button class="btn btn-info" disabled="disabled">维修中</button>
					</a></td>
					<td v-if="item.bsstatus == 204"><a @click="unstop(item.bsno)"
						href="javascript:void(0);">
							<button class="btn btn-info">启用</button>
					</a></td>
				</tr>
			</tbody>
			<tfoot>
				<tr>
					<td colspan="10">
						<ul class="pagination">
							<li><a href="javascript:void(0);" @click="list(1)">&laquo;</a></li>
							<li><a href="javascript:void(0);"
								@click="list(pager.begin-pager.step)">&larr;</a></li>
						</ul>
						<ul class="pagination" v-for="n in pager.end+1-pager.begin">
							<li :class="pager.begin+n-1==pager.index?'active':''"><a
								href="javascript:void(0);" @click="list(pager.begin+n-1)">{{pager.begin+n-1}}</a>
							</li>
						</ul>
						<ul class="pagination">
							<li><a href="javascript:void(0);"
								@click="list(pager.begin+pager.step)">&rarr;</a></li>
							<li><a href="javascript:void(0);" @click="list(pager.page)">&raquo;</a></li>
						</ul>
					</td>
				</tr>
			</tfoot>
		</table>
		<div id="mymodal" class="modal">
			<div class="modal-dialog" data-backdrop="static">
				<div class="modal-content">
					<div class="modal-header">
						<button class="close" data-dismiss="modal">&times;</button>
						<h4 id="title">标题</h4>
					</div>
					<div class="modal-body">
						<form class="form-horizontal" @submit.prevent method="post">
							<div class="form-group">
								<label class="col-sm-4 control-label text-right">车牌号:</label>
								<div class="col-sm-4">
									<input type="text" id="bsno" :value="bus.bsno"
										:readonly="readonly" class="form-control" pattern="^\d{5,10}$"
										required placeholder="请输入车牌号(5-10位数字)" />
								</div>
								<p class="col-sm-4 help-block">车牌号不能为空</p>
							</div>
							<div class="form-group">
								<label class="col-sm-4 control-label text-right">请选择车辆类型:</label>
								<div class="col-sm-4">
									<select id="bstype" class="form-control">
										<option v-for="bstype in bstypes">{{bstype.dtvalue}}</option>
									</select>
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-4 control-label text-right">请选择车辆颜色:</label>
								<div class="col-sm-4">
									<select id="bscolor" class="form-control">
										<option v-for="bscolor in bscolors">{{bscolor.dtvalue}}</option>
									</select>
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-4 control-label text-right">车辆价格:</label>
								<div class="col-sm-4">
									<input type="text" id="bsprice" :value="bus.bsprice"
										pattern="^[1-9]\d{2,5}$" class="form-control" required
										placeholder="请输入车辆价格" />
								</div>
								<p class="col-sm-4 help-block">车辆价格不能为空</p>
							</div>
							<div class="form-group">
								<label class="col-sm-4 control-label text-right">出租价格:</label>
								<div class="col-sm-4">
									<input type="text" id="bsrent" :value="bus.bsrent"
										pattern="^[1-9]\d{2,5}$" class="form-control" required
										placeholder="请输入出租价格" />
								</div>
								<p class="col-sm-4 help-block">出租价格不能为空</p>
							</div>
							<div class="form-group">
								<label class="col-sm-4 control-label text-right">出租押金:</label>
								<div class="col-sm-4">
									<input type="text" id="bsdeposit" :value="bus.bsdeposit"
										pattern="^[1-9]\d{2,5}$" class="form-control" required
										placeholder="请输入出租押金" />
								</div>
								<p class="col-sm-4 help-block">出租押金不能为空</p>
							</div>
							<div class="form-group">
								<label class="col-sm-4 control-label text-right">车辆描述:</label>
								<div class="col-sm-4">
									<textarea id="bsdesc" :value="bus.bsdesc" rows="5" cols="10"
										class="form-control" required></textarea>
								</div>
								<p class="col-sm-4 help-block">车辆描述不能为空</p>
							</div>
							<div class="form-group">
								<label class="col-sm-4 control-label text-right">车辆图片:</label>
								<div class="col-sm-4">
									<input type="file" id="myfile" class="form-control" required
										placeholder="请选择车辆图片"
										accept="image/bmp,image/png,image/jpg,image/jpeg" />
								</div>
							</div>
							<div class="form-group">
								<div class="col-sm-4 col-sm-offset-4">
									<input type="hidden" id="op" /> <input type="submit"
										class="btn btn-default" value="确定" @click="save()" /> <input
										type="button" data-dismiss="modal" class="btn btn-default"
										value="取消" />
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script type="text/javascript">
		new Vue({
			el : '#app',
			data : {
				index : 1,
				size : 5,
				step : 10,
				bsno : "",
				pager : {},
				bstypes : {},
				bscolors : {},
				bus : {},
				readonly : true
			},
			methods : {
				list : function(index) {
					var self = this;
					self.index = index;
					var url = "${root}/bus/list?bsno=" + self.bsno + "&index="
							+ self.index + "&size=" + self.size + "&step="
							+ self.step;
					axios.get(url).then(function(res) {
						self.pager = res.data;
					});
				},
				search : function() {
					var self = this;
					self.index = 1;
					self.list(self.index);
				},
				all : function() {
					var self = this;
					self.bsno = "";
					self.index = 1;
					self.list(self.index);
				},
				getType : function() {
					var self = this;
					var url = "${root}/dict/list?tid=3";
					axios.get(url).then(function(res) {
						self.bstypes = res.data
					});
				},
				getColor : function() {
					var self = this;
					var url = "${root}/dict/list?tid=4";
					axios.get(url).then(function(res) {
						self.bscolors = res.data
					});
				},
				add : function() {
					var self = this;
					self.bus = {};
					self.readonly = false;
					self.title = '车辆信息添加';
					$("#myfile").val("");
					$("#op").val("add");
					$("#mymodal").modal('show');

					//测试数据
					var mm = Math.random();
					var num = Math.round(mm * 1000000);
					self.bus.bsno = num;
					self.bus.bsprice = "600000";
					self.bus.bsrent = "600";
					self.bus.bsdeposit = "6000";
					self.bus.bsdesc = "这是一条车辆描述";
				},
				update : function(item) {
					var self = this;
					self.bus = item;
					self.readonly = true;
					self.title = '车辆信息修改';
					$("#myfile").val("");
					$("#mymodal").modal('show');
				},
				stop : function(bsno) {
					var self = this;
					var url = "${root}/bus/stop?bsno=" + bsno;
					axios.get(url).then(function(res) {
						alert(res.data.message);
						self.list(self.index);
					});
				},
				unstop : function(bsno) {
					var self = this;
					var url = "${root}/bus/unstop?bsno=" + bsno;
					axios.get(url).then(function(res) {
						alert(res.data.message);
						self.list(self.index);
					});
				},
				save : function() {
					var count = 0;
					var self = this;
					var bsno = document.getElementById("bsno");
					var bsprice = document.getElementById("bsprice");
					var bsrent = document.getElementById("bsrent");
					var bsdeposit = document.getElementById("bsdeposit");
					var bsdesc = document.getElementById("bsdesc");

					if (bsno.validity.valueMissing) {
						bsno.setCustomValidity("车牌号不能为空");
					} else if (bsno.validity.patternMismatch) {
						bsno.setCustomValidity("车牌号必须是5到10位有效数字");
					} else {
						bsno.setCustomValidity("");
						count++;
					}

					if (bsprice.validity.valueMissing) {
						bsprice.setCustomValidity("车辆价格不能为空");
					} else if (bsprice.validity.patternMismatch) {
						bsprice.setCustomValidity("车辆价格必须是3到6位有效数字");
					} else {
						bsprice.setCustomValidity("");
						count++;
					}

					if (bsrent.validity.valueMissing) {
						bsrent.setCustomValidity("车辆租金不能为空");
					} else if (bsrent.validity.patternMismatch) {
						bsrent.setCustomValidity("车辆租金必须是3到6位有效数字");
					} else {
						bsrent.setCustomValidity("");
						count++;
					}

					if (bsdeposit.validity.valueMissing) {
						bsdeposit.setCustomValidity("车辆押金不能为空");
					} else if (bsdeposit.validity.patternMismatch) {
						bsdeposit.setCustomValidity("车辆押金必须是3到6位有效数字");
					} else {
						bsdeposit.setCustomValidity("");
						count++;
					}

					if (bsdesc.validity.valueMissing) {
						bsdesc.setCustomValidity("车辆描述不能为空");
					} else {
						bsdesc.setCustomValidity("");
						count++;
					}

					var file = $('#myfile')[0].files[0];
					if (file.length == 0) {
						alert('请上传文件');
					} else {
						count++;
					}
					if (count == 6) {
						var url;
						if ($("#op").val() == "add") {
							url = "${root}/bus/add";
						} else {
							url = "${root}/bus/update";
						}
						var fd = new FormData();
						fd.append("bsno", bsno.value);
						fd.append("bsprice", bsprice.value);
						fd.append("bsrent", bsrent.value);
						fd.append("bsdeposit", bsdeposit.value);
						fd.append("bsdesc", bsdesc.value);
						fd.append("bstype", $("#bstype").val());
						fd.append("bscolor", $("#bscolor").val());
						fd.append("myfile", file);
						axios.post(url, fd).then(function(res) {
							alert(res.data.message);
							$("#mymodal").modal("hide");
							self.list(self.index);
						});
					} else {
						return;
					}
				},
			},
			mounted : function() {
				this.list(this.index);
				this.getType();
				this.getColor();
			}
		})
	</script>
</body>
</html>